<script>
import {getShopBgDetail, queryPortInformation} from "@/api/mall";
import {useArticleApi} from "@/api/homePage";
import { oneWayList, roundTripList } from './boatTicketList.js';

export default {
  name: "query",
  data() {
    return {
      oneWayList,
      roundTripList,
      // 轮播图数据
      bannerList: [],
      
      // 单程往返选择
      tripType: 1, // 0-单程，1-往返
      isTabSwitching: false, // 标签切换状态控制
      
      // 港口数据
      portList: [], // 港口信息
      cities: [], // 港口名称数组，用于picker显示
      
      // 出发城市和目的地城市索引
      fromCityIndex: 0,
      toCityIndex: 1,
      
      // 交换城市动画状态
      isSwapping: false,
      
      // 日期选择
      selectedDate: null,
      returnDate: null,
      dateText: '',
      weekday: '',
      
      // 日期选择器范围
      datePickerStart: '',
      datePickerEnd: '',
      
      // 多日通勤开关状态
      multiDayCommute: false,
      
      // 公告数据
      announcement: null,
      startCityId: undefined,
      startCityIndex: undefined,
      startCityName: '',
      endCityId: undefined,
      endCityIndex: undefined,
      endCityName: '',
    }
  },
  computed: {
    startCities() {
      const portList = this.tripType === 1 ? this.roundTripList : this.oneWayList;
      let startCities = [];
      startCities = portList.map(item => {
        const { PortID, PortCode, PortEName, PortCName } = item;
        return {
          PortID,
          PortCode,
          PortEName,
          PortCName
        }
      });
      if (startCities.length) {
        const find = startCities.find(item => item.PortID === this.startCityId);
        if (!find) {
          this.startCityId = startCities[0].PortID;
          this.startCityIndex = 0;
          this.startCityName = startCities[0].PortCName;
        }
      }
      return startCities;
    },
    endCities() {
      const portList = this.tripType === 1 ? this.roundTripList : this.oneWayList;
      let endCities = [];
      if (this.startCityId) {
        const find = portList.find(item => item.PortID == this.startCityId);
        if (find) {
          endCities = find.ArrivePortList.map(ietm => {
            const { PortID, PortCode, PortEName, PortCName } = ietm;
            return {
              PortID,
              PortCode,
              PortEName,
              PortCName
            }
          })
        }
      }
      if (endCities.length) {
        const find = endCities.find(item => item.PortID === this.endCityId);
        if (!find) {
          this.endCityId = endCities[0].PortID;
          this.endCityIndex = 0;
          this.endCityName = endCities[0].PortCName;
        }
      }
      return endCities;
    },
    // 获取当前选中的出发城市
    // fromCity() {
    //   return this.cities[this.fromCityIndex] || '';
    // },
    
    // 获取当前选中的目的地城市
    // toCity() {
    //   return this.cities[this.toCityIndex] || '';
    // },
    
    // 获取当前选中的出发港口ID
    // fromPortId() {
    //   return this.portList[this.fromCityIndex]?.portID || '';
    // },
    
    // 获取当前选中的目的地港口ID
    // toPortId() {
    //   return this.portList[this.toCityIndex]?.portID || '';
    // },
    
    // 格式化日期显示
    formattedDate() {
      if (!this.selectedDate) return { month: '', day: '', weekDay: '' };
      
      const date = new Date(this.selectedDate);
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const weekDays = [
        this.$t('common.weekdays.sunday'),
        this.$t('common.weekdays.monday'),
        this.$t('common.weekdays.tuesday'),
        this.$t('common.weekdays.wednesday'),
        this.$t('common.weekdays.thursday'),
        this.$t('common.weekdays.friday'),
        this.$t('common.weekdays.saturday')
      ];
      const weekDay = weekDays[date.getDay()];
      
      return {
        month: month,
        day: day,
        weekDay: weekDay
      };
    },
    
    // 格式化返程日期显示
    formattedReturnDate() {
      if (!this.returnDate) return { month: '', day: '', weekDay: '' };
      
      const date = new Date(this.returnDate);
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const weekDays = [
        this.$t('common.weekdays.sunday'),
        this.$t('common.weekdays.monday'),
        this.$t('common.weekdays.tuesday'),
        this.$t('common.weekdays.wednesday'),
        this.$t('common.weekdays.thursday'),
        this.$t('common.weekdays.friday'),
        this.$t('common.weekdays.saturday')
      ];
      const weekDay = weekDays[date.getDay()];
      
      return {
        month: month,
        day: day,
        weekDay: weekDay
      };
    }
  },
  watch: {
    '$i18n.locale'() {
      // 监听语言变化，重新设置导航栏标题
      this.setNavigationTitle();
    }
  },
  onLoad() {
    // 初始化日期为今天
    this.initDate();
    this.initBanner();
    // 初始化港口数据
    // this.initPortData();
    // 初始化公告数据
    this.initAnnouncement();
    // 设置导航栏标题
    this.setNavigationTitle();
  },
  methods: {
    // 设置导航栏标题
    setNavigationTitle() {
      uni.setNavigationBarTitle({
        title: this.$t('ticket.query.title', '船票查询')
      });
    },

    // 初始化港口数据
    async initPortData() {
      try {
        const res = await queryPortInformation();
        if (res && res.Data && Array.isArray(res.Data)) {
          this.portList = res.Data;
          // 提取港口中文名称用于picker显示
          this.cities = res.Data.map(port => port.portCName);
          console.log('港口数据加载成功:', this.portList);
        }
      } catch (error) {
        console.error('获取港口数据失败:', error);
        // 失败时使用默认数据
        this.cities = ['桂山岛', '东澳岛', '外伶仃岛', '大万山岛'];
        uni.showToast({
          title: this.$t('ticket.list.portDataLoadFailed'),
          icon: 'none'
        });
      }
    },
    
    // 切换单程/往返
    switchTripType(type) {
      if (this.tripType === type || this.isTabSwitching) return;
      
      this.isTabSwitching = true;
      this.tripType = type;
      
      // 延迟重置切换状态，确保动画完成
      setTimeout(() => {
        this.isTabSwitching = false;
      }, 400);
    },

    initBanner(){
      getShopBgDetail({
        Id: 35
      }).then(res =>{
        const data = res.Data

        this.bannerList = data.BusinesImgList.split("|")?.map(item => {
          return {
            url: item
          }
        })
      })
    },
    
    // 初始化日期
    initDate() {
      const today = new Date();
      this.selectedDate = this.getFormattedDate(today);
      this.returnDate = this.getFormattedDate(today);
      this.datePickerStart = this.getFormattedDate(today);
      
      // 设置结束日期为15天后
      const endLimit = new Date();
      endLimit.setDate(endLimit.getDate() + 21);
      this.datePickerEnd = this.getFormattedDate(endLimit);
    },
    
    // 获取格式化的日期字符串 YYYY-MM-DD
    getFormattedDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    
    // 日期选择变化
    onDateChange(value) {
      this.selectedDate = value;
      
      // 如果往返日期早于出发日期，自动调整
      if (this.returnDate && new Date(this.returnDate) < new Date(value)) {
        this.returnDate = value;
      }
    },
    
    // 返程日期选择变化
    onReturnDateChange(value) {
      this.returnDate = value;
    },
    
    // 出发城市选择变化
    bindFromCityChange(e) {
      const index = e.detail.value;
      // 如果选择的城市与目的地相同，则自动切换目的地
      if (index == this.toCityIndex) {
        this.toCityIndex = this.fromCityIndex;
      }
      this.fromCityIndex = index;
    },
    
    // 目的地城市选择变化
    bindToCityChange(e) {
      const index = e.detail.value;
      // 如果选择的城市与出发地相同，则自动切换出发地
      if (index == this.fromCityIndex) {
        this.fromCityIndex = this.toCityIndex;
      }
      this.toCityIndex = index;
    },
    
    // 交换出发地和目的地
    swapCities() {
      // this.isSwapping = true;
      
      // setTimeout(() => {
      //   const temp = this.fromCityIndex;
      //   this.fromCityIndex = this.toCityIndex;
      //   this.toCityIndex = temp;
      //   this.isSwapping = false;
      // }, 300);
      const portList = this.tripType === 1 ? this.roundTripList : this.oneWayList;
      const findIndex = portList.findIndex(item => item.PortID === this.endCityId);
      if (findIndex === -1) {
        uni.showToast({
          title: `暂不支持出发地${this.endCityName}至${this.startCityName}购票`,
          icon: 'none',
          duration: 2000
        })
        return;
      }
      this.startCityIndex = findIndex;
      const tempCityId = this.startCityId;
      const tempCityName = this.startCityName;
      this.startCityId = this.endCityId;
      this.startCityName = this.endCityName;
      this.endCityId = tempCityId;
      this.endCityName = tempCityName;
      this.$nextTick(() => {
        const endIndex = this.endCities.findIndex(item => item.PortID === this.endCityId);
        this.endCityIndex = endIndex;
      })
    },
    
    // 提交查询
    handleSearch() {
      // 验证数据
      // if (!this.fromPortId || !this.toPortId) {
      if (!this.startCityId || !this.endCityId) {
        uni.showToast({
          title: this.$t('ticket.query.selectDepartureDestination'),
          icon: 'none'
        });
        return;
      }
      
      if (!this.selectedDate) {
        uni.showToast({
          title: this.$t('ticket.query.selectDepartureDate'),
          icon: 'none'
        });
        return;
      }
      
      // 构建查询参数 - 只传递必要的ID和时间
      const params = {
        // fromPortId: this.fromPortId,
        fromPortId: this.startCityId,
        // toPortId: this.toPortId,
        toPortId: this.endCityId,
        date: this.selectedDate,
        tripType: this.tripType
      };
      
      // 往返票需要添加返程日期
      if (this.tripType === 1) {
        if (!this.returnDate) {
          uni.showToast({
            title: this.$t('ticket.query.selectReturnDate'),
            icon: 'none'
          });
          return;
        }
        params.returnDate = this.returnDate;
      }
      
      console.log('查询参数:', params);
      
      // 根据查询类型跳转到不同的列表页
      if (this.tripType === 0) {
        // 单程跳转到list.vue
        uni.navigateTo({
          // url: `/ticket_subpages/index/list?from=${this.fromPortId}&to=${this.toPortId}&date=${this.selectedDate}&tripType=${this.tripType}`
          url: `/ticket_subpages/index/list?from=${this.startCityId}&to=${this.endCityId}&date=${this.selectedDate}&tripType=${this.tripType}`
        });
      } else {
        // 获取平台信息，判断是否为Android设备
        const isAndroid = this.$store.state.app.isAndroid;
        console.log('当前平台:', this.$store.state.app.platform);
        console.log('是否为Android设备:', isAndroid);
        
        if (isAndroid) {
          // Android设备跳转到Android专用页面
          uni.navigateTo({
            // url: `/ticket_subpages/index/multipleList-android?fromPortId=${this.fromPortId}&toPortId=${this.toPortId}&date=${this.selectedDate}&returnDate=${this.returnDate}&tripType=${this.tripType}`
            url: `/ticket_subpages/index/multipleList-android?fromPortId=${this.startCityId}&toPortId=${this.endCityId}&date=${this.selectedDate}&returnDate=${this.returnDate}&tripType=${this.tripType}`
          });
        } else {
          // iOS或其他设备跳转到原始页面
          uni.navigateTo({
            // url: `/ticket_subpages/index/multipleList?fromPortId=${this.fromPortId}&toPortId=${this.toPortId}&date=${this.selectedDate}&returnDate=${this.returnDate}&tripType=${this.tripType}`
            url: `/ticket_subpages/index/multipleList?fromPortId=${this.startCityId}&toPortId=${this.endCityId}&date=${this.selectedDate}&returnDate=${this.returnDate}&tripType=${this.tripType}`
          });
        }
      }
    },
    jumpBanner(){

    },
    // 初始化公告数据
    async initAnnouncement() {
      try {
        const res = await useArticleApi({
          ArticleCategoryId: 3603,
          Index: 1,
          Size: 1
        });
        
        if (res && res.Data && res.Data.length > 0) {
          this.announcement = res.Data[0];
        }
      } catch (error) {
        console.error('获取公告数据失败:', error);
      }
    },
    
    // 跳转到公告页面
    jumpAnnouncement() {
      uni.navigateTo({
        url: '/pages/announcement/index?id=3603'
      });
    },
    onJumpTicket() {
      const itemId = 928;
      const url = `/ticket_subpages/index/shopItemList?id=${itemId}`;
      uni.navigateTo({ url });
    },
    onChangeStartCity(e) {
      const index = e.detail.value;
      const startCityId = this.startCities[index].PortID;
      if (startCityId === this.startCityId) return;
      this.startCityId = startCityId;
      this.startCityIndex = index;
      this.startCityName = this.startCities[index].PortCName;
      this.endCityId = undefined;
      this.endCityIndex = undefined;
      this.endCityName = '';
    },
    onChangeEndCity(e) {
      const index = e.detail.value;
      const endCityId = this.endCities[index].PortID;
      if (endCityId === this.endCityId) return;
      this.endCityId = endCityId;
      this.endCityIndex = index;
      this.endCityName = this.endCities[index].PortCName;
    }
  }
}
</script>

<template>
  <view class="query-page">
    <u-navbar :autoBack="true" bgColor="transparent">
    </u-navbar>
    <!-- 头部轮播图 -->
    <view class="header-swiper">
      <u-swiper 
        :list="bannerList" 
        height="450rpx"
        indicatorMode="dot"
        indicator
        indicatorStyle="bottom: 20rpx"
        @click="jumpBanner"
      ></u-swiper>
    </view>
    
    <view class="query-container">
      <!-- 单程/往返选择卡片 -->
      <view class="trip-type-card">
        <view 
          class="trip-type-tab" 
          :class="{'active': tripType === 0}" 
          @click="switchTripType(0)"
        >
          <text>{{$t('ticket.query.oneWay')}}</text>
        </view>
        <view 
          class="trip-type-tab" 
          :class="{'active': tripType === 1}" 
          @click="switchTripType(1)"
        >
          <text>{{$t('ticket.query.roundTrip')}}</text>
        </view>
        <!-- 滑动指示器 -->
        <view class="tab-indicator" :style="{transform: `translateX(${tripType * 100}%)`}"></view>
      </view>
      
      <!-- 城市和日期选择卡片 -->
      <view class="query-card">
        <!-- 城市选择区域 -->
        <view class="city-selection">
          <!-- 出发城市选择 -->
          <!-- <picker @change="bindFromCityChange" :value="fromCityIndex" :range="cities">
            <view class="city-item">
              <text class="city-label">{{$t('ticket.query.departure')}}</text>
              <text class="city-name">{{fromCity}}</text>
            </view>
          </picker> -->
          <picker
            :value="startCityIndex"
            :range="startCities"
            rangeKey="PortCName"
            @change="onChangeStartCity"
          >
            <view class="city-item">
              <text class="city-label">{{$t('ticket.query.departure')}}</text>
              <text class="city-name">{{ startCityName }}</text>
            </view>
          </picker>

          <!-- 切换按钮 -->
          <view class="swap-button" :class="{'rotating': isSwapping}"  @click="swapCities">
            <image src="https://wzws.wanshanlundiao.cn/upload/img/20250415/202504151030282125.png" mode="aspectFit"></image>
          </view>
          
          <!-- 目的地城市选择 -->
          <!-- <picker @change="bindToCityChange" :value="toCityIndex" :range="cities">
            <view class="city-item">
              <text class="city-label">{{$t('ticket.query.destination')}}</text>
              <text class="city-name">{{toCity}}</text>
            </view>
          </picker> -->
          <picker
            :value="endCityIndex"
            :range="endCities"
            rangeKey="PortCName"
            @change="onChangeEndCity"
          >
            <view class="city-item">
              <text class="city-label">{{$t('ticket.query.destination')}}</text>
              <text class="city-name">{{ endCityName }}</text>
            </view>
          </picker>
        </view>
        
        <!-- 分割线 -->
        <view class="divider"></view>
        
        <!-- 日期选择区域 -->
        <view class="date-selection">
          <transition name="fade-slide" mode="out-in">
            <view class="date-row" v-if="tripType === 0" key="single">
            <view class="date-col">
              <text class="date-label">{{$t('ticket.query.departureDate')}}</text>
              <uni-datetime-picker
                type="date"
                v-model="selectedDate"
                :start="datePickerStart"
                :end="datePickerEnd"
                @change="onDateChange"
                :clear-icon="false"
              >
                <view class="date-content">
                  <text class="date-day">{{formattedDate.month}}月{{formattedDate.day}}日</text>
                  <text class="date-week">{{formattedDate.weekDay}}</text>
                </view>
              </uni-datetime-picker>
            </view>
          </view>
          
            <view class="date-row two-col" v-else key="round">
            <view class="date-col">
              <text class="date-label">{{$t('ticket.query.departureDate')}}</text>
              <uni-datetime-picker
                type="date"
                v-model="selectedDate"
                :start="datePickerStart"
                :end="datePickerEnd"
                @change="onDateChange"
                :clear-icon="false"
              >
                <view class="date-content">
                  <text class="date-day">{{formattedDate.month}}月{{formattedDate.day}}日</text>
                  <text class="date-week">{{formattedDate.weekDay}}</text>
                </view>
              </uni-datetime-picker>
            </view>

            <view class="date-col">
              <text class="date-label">{{$t('ticket.query.returnDate')}}</text>
              <uni-datetime-picker
                type="date"
                v-model="returnDate"
                :start="selectedDate"
                :end="datePickerEnd"
                @change="onReturnDateChange"
                :clear-icon="false"
              >
                <view class="date-content">
                  <text class="date-day">{{formattedReturnDate.month}}月{{formattedReturnDate.day}}日</text>
                  <text class="date-week">{{formattedReturnDate.weekDay}}</text>
                </view>
              </uni-datetime-picker>
            </view>
          </view>
          </transition>
        </view>
      </view>

      <!-- 公告栏 -->
      <view class="announcement-bar" @click="jumpAnnouncement">
        <view class="announcement-title">{{$t('ticket.query.announcement')}}</view>
        <view class="announcement-content">
          <text>{{announcement ? announcement.Title : $t('ticket.query.noAnnouncement')}}</text>
          <view class="announcement-arrow"></view>
        </view>
      </view>
      
      <!-- 查询按钮 -->
      <button class="search-button" @click="handleSearch">{{$t('ticket.query.queryBtn')}}</button>

      <view class="shop-img" @click="onJumpTicket">
        <image :src="bannerList[0].url" mode="aspectFill" class="img" />
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.query-page {
  min-height: 100vh;
  background-color: #F5F6F7;
}

/* 头部轮播图 */
.header-swiper {
  position: relative;
  height: 450rpx;
  width: 100%;
  
  .back-btn {
    position: absolute;
    top: 80rpx;
    left: 30rpx;
    z-index: 10;
    
    .back-icon {
      width: 80rpx;
      height: 80rpx;
      background-color: rgba(0, 0, 0, 0.3);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      
      &:before {
        content: '';
        width: 20rpx;
        height: 20rpx;
        border-left: 4rpx solid #fff;
        border-bottom: 4rpx solid #fff;
        transform: rotate(45deg);
        margin-left: 10rpx;
      }
    }
  }
}

.query-container {
  padding: 0 30rpx;
  margin-top: -40rpx;
  position: relative;
  z-index: 2;
}

/* 单程往返选择卡片 */
.trip-type-card {
  position: relative;
  height: 90rpx;
  display: flex;
  overflow: hidden;
  background-color: #F5F7FA;
  border-radius: 16rpx 16rpx 0 0;
  
  .trip-type-tab {
    flex: 1;
    height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
    z-index: 2;
    
    text {
      font-size: 32rpx;
      color: #666;
      transition: all 0.3s ease;
      font-weight: 500;
    }
    
    &.active text {
      color: #498FFF;
      font-weight: bold;
    }
    }
    
  /* 滑动指示器 */
  .tab-indicator {
      position: absolute;
      bottom: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: #FFFFFF;
    border-radius: 16rpx 16rpx 0 0;
    box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1;
  }
}

/* 查询卡片 */
.query-card {
  background-color: #fff;
  border-radius: 0 0 16rpx 16rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 40rpx;
  padding: 20rpx 30rpx;
  position: relative;
  z-index: 1;
}

/* 分割线 */
.divider {
  height: 1rpx;
  background-color: #f0f0f0;
  margin: 20rpx 0;
}

.date-divider {
  height: 1rpx;
  background-color: #f0f0f0;
  margin: 10rpx 0;
}

/* 城市选择区域 */
.city-selection {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  
  picker {
    flex: 1;
    width: 0; /* 让flex布局控制宽度 */
    max-width: 40%;
  }
  
  .city-item {
    padding: 20rpx 0;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .city-label {
      font-size: 24rpx;
      color: #666;
      margin-bottom: 8rpx;
    }
    
    .city-name {
      font-size: 40rpx;
      font-weight: bold;
      color: #333;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  
  .swap-button {
    width: 80rpx;
    height: 80rpx;
    flex-shrink: 0; /* 防止按钮被压缩 */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #f0f5ff;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    margin: 0 10rpx; /* 左右添加间距 */
    
    &.rotating {
      transform: rotate(180deg);
    }
    
    image {
      width: 40rpx;
      height: 40rpx;
    }
  }
}

/* 日期选择区域 */
.date-selection {
  position: relative;
  overflow: hidden;
  min-height: 120rpx;
  
  .date-row {
    display: flex;
    width: 100%;
    
    &.two-col {
      gap: 60rpx;
    }
    
    .date-col {
      flex: 1;
      padding: 20rpx 0;
      
      .date-label {
        font-size: 24rpx;
        color: #666;
        margin-bottom: 10rpx;
        display: block;
      }
      
      .date-content {
        display: flex;
        align-items: center;
        
        .date-day {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
        }
        
        .date-week {
          font-size: 26rpx;
          color: #666;
          margin-left: 16rpx;
        }
        
        .date-arrow {
          font-size: 24rpx;
          color: #999;
          margin-left: auto;
        }
      }
    }
  }
}

/* 搜索按钮 */
.search-button {
  height: 86rpx;
  background: linear-gradient(135deg, #498FFF 0%, #3A7FE6 100%);
  color: #FFFFFF;
  font-size: 32rpx;
  font-weight: 500;
  border-radius: 44rpx;
  transition: all 0.3s ease;
  letter-spacing: 2rpx;
  margin-bottom: 30rpx;

  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 2rpx 8rpx rgba(73,143,255,0.2);
  }
}

/* 公告栏 */
.announcement-bar {
  background-color: #EAF9E8;
  border-radius: 12rpx;
  padding: 20rpx;
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
  
  .announcement-title {
    background-color: #48A933;
    color: #fff;
    font-size: 24rpx;
    padding: 8rpx 16rpx;
    border-radius: 6rpx;
    margin-right: 20rpx;
  }
  
  .announcement-content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    text {
      font-size: 26rpx;
      color: #333;
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .announcement-arrow {
      width: 16rpx;
      height: 16rpx;
      border-top: 2rpx solid #666;
      border-right: 2rpx solid #666;
      transform: rotate(45deg);
      margin-left: 10rpx;
    }
  }
}

/* 服务菜单 */
.service-menu {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40rpx;
  
  .service-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    image {
      width: 100rpx;
      height: 100rpx;
      margin-bottom: 15rpx;
    }
    
    text {
      font-size: 26rpx;
      color: #333;
    }
  }
}

/* 淡入淡出动画 */
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.3s ease;
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateY(20rpx);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateY(-20rpx);
}

.shop-img {
  margin-top: 96rpx;
  width: 100%;
  height: 140rpx;
  .img {
    width: 100%;
    height: 100%;
    border-radius: 12rpx;
    transition: transform 0.3s ease;
  }
}
</style>